<template>
  <div class="title">
    <div
      class="top"
      @mousedown="handleDown"
      @mousemove="handleMove"
      @mouseleave="handleLeave"
    >
      <!-- 最小化 -->
      <el-tooltip content="最小化" placement="bottom" effect="light">
        <el-icon @click="min()">
          <minus />
        </el-icon>
        <span icon="Minus"></span>
      </el-tooltip>
      <!-- 全屏/半屏 -->
      <el-tooltip content="全屏/半屏" placement="bottom" effect="light">
        <el-icon @click="fullScreen()">
          <FullScreen />
        </el-icon>
      </el-tooltip>
      <!-- 关闭 -->
      <el-tooltip content="关闭" placement="bottom" effect="light">
        <el-icon @click="close()">
          <close />
        </el-icon>
      </el-tooltip>
    </div>
    <div class="bottom">
      <el-dropdown>
        <span class="el-dropdown-link"> 文件 </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>新建窗口</el-dropdown-item>
            <el-dropdown-item>保存</el-dropdown-item>
            <el-dropdown-item>另存为</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <el-dropdown>
        <span class="el-dropdown-link"> 编辑 </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>复制</el-dropdown-item>
            <el-dropdown-item>粘贴</el-dropdown-item>
            <el-dropdown-item>删除</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <el-dropdown>
        <span class="el-dropdown-link"> 编辑 </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>缩放</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>
<script>
import { Minus, Close, FullScreen } from "@element-plus/icons-vue";
import { ElDropdown, ElDropdownMenu, ElDropdownItem } from "element-plus";
const versions = window.versions; // electron 暴漏的主进程事件
export default {
  data() {
    return {
      windowStatus: false,
      dragging: "",
      offsetX: "",
      offsetY: "",
      versions,
    };
  },
  components: {
    Minus,
    Close,
    FullScreen,
    ElDropdown,
    ElDropdownMenu,
    ElDropdownItem,
  },
  mounted() {},
  methods: {
    // 最小化系统托盘
    min() {
      versions.minimize();
    },
    fullScreen() {
      this.windowStatus = !this.windowStatus;
      versions.windowStatus();
    },
    close() {
      versions.closeWin();
    },
    // 用来处理鼠标按下事件
    handleDown(event) {
      // offset和client，用于获取元素的尺寸和位置信息
      // offset属性用于获取元素的尺寸和位置信息，相对于其父元素或包含快
      // client属性用于获取元素的尺寸和位置信息，相对于浏览器视口
      // 获取鼠标按下时的坐标
      this.offsetX = event.clientX;
      this.offsetY = event.clientY;
      this.dragging = true;
    },
    // 处理鼠标移动事件
    handleMove(event) {
      if (this.dragging) {
        const offsetX = event.clientX - this.offsetX;
        const offsetY = event.clientY - this.offsetY;
        this.versions.handleDragWindow(offsetX, offsetY);
      }
    },
    // 处理鼠标松开事件
    handleLeave() {
      this.dragging = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.title {
  .top {
    text-align: right;
    background: #e1d8d3;

    .el-icon {
      color: #000;
      padding: 10px;
      font-size: 16px;
      cursor: pointer;
    }
  }

  .bottom {
    display: flex;
    background-color: #f6f3f2;

    .el-dropdown {
      color: #000;
      padding: 10px;
      font-size: 16px;

      .el-dropdown-link {
        outline: none !important;
      }
    }
  }
}
</style>
<style>
.el-popper {
  overflow: auto;
}

.el-popper.is-pure.is-light.el-dropdown__popper {
  width: 100px !important;
  /* 自定义宽度 */
}
</style>
